<template>
  <div class="SOLBody wap">
    <div class="SOLTop" :class="showMask?'showMaskStyle':''">
      <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}">
        特价列表
        <a class="headRight" slot="right" @click="goSOSettingPage">新增特价</a>
      </x-header>
      <div
        @click="showDialog"
        class="allStatus flex-direction-column display-flex align-items-center justify-content-flex-center"
      >
        <p v-if="selectIndex==99">
          全部状态
          <img src="../../../../assets/img/order/down.png" alt />
        </p>
        <p v-if="selectIndex==0">
          未开始
          <img src="../../../../assets/img/order/down.png" alt />
        </p>
        <p v-if="selectIndex==1">
          进行中
          <img src="../../../../assets/img/order/down.png" alt />
        </p>
        <p v-if="selectIndex==2">
          已结束
          <img src="../../../../assets/img/order/down.png" alt />
        </p>
        <p v-if="selectIndex==9">
          已停止
          <img src="../../../../assets/img/order/down.png" alt />
        </p>
      </div>
      <div
        class="statusList flex-direction-column display-flex align-items-center justify-content-flex-center"
        v-show="showMask"
      >
        <p
          class="statusItem display-flex align-items-center justify-content-flex-justify"
          @click="closeDialog(0)"
        >
          <span :class="selectIndex==0?'selectText':''">未开始</span>
          <img v-show="selectIndex==0" src="../../../../assets/img/order/select.png" alt />
        </p>
        <p
          class="statusItem display-flex align-items-center justify-content-flex-justify"
          @click="closeDialog(1)"
        >
          <span :class="selectIndex==1?'selectText':''">进行中</span>
          <img v-show="selectIndex==1" src="../../../../assets/img/order/select.png" alt />
        </p>
        <p
          class="statusItem display-flex align-items-center justify-content-flex-justify"
          @click="closeDialog(2)"
        >
          <span :class="selectIndex==2?'selectText':''">已结束</span>
          <img v-show="selectIndex==2" src="../../../../assets/img/order/select.png" alt />
        </p>
        <p
          class="statusItem display-flex align-items-center justify-content-flex-justify"
          @click="closeDialog(9)"
        >
          <span :class="selectIndex==9?'selectText':''">已停止</span>
          <img v-show="selectIndex==9" src="../../../../assets/img/order/select.png" alt />
        </p>
        <p
          class="statusItem display-flex align-items-center justify-content-flex-justify"
          @click="closeDialog(99)"
        >
          <span :class="selectIndex==99?'selectText':''">全部状态</span>
          <img v-show="selectIndex==99" src="../../../../assets/img/order/select.png" alt />
        </p>
      </div>
    </div>
    <div class="main">
      <scroller v-if="dataArr.length>0">
        <ul
          class="specialOfferList flex-direction-column display-flex align-items-center justify-content-flex-center"
        >
          <li
            v-for="(item,index) in dataArr"
            :key="index"
            class="specialOfferItem display-flex flex-direction-row"
          >
            <div class="specialOfferContent display-flex flex-direction-column">
              <p
                v-if="item.buyGoods!==null"
                class="display-flex flex-direction-row align-items-center"
              >
                <span>【{{item.buyGoods.brandName}}】{{item.buyGoods.name}} {{item.buyGoods.spec}}</span>
              </p>
              <div class="soTip">
                <div>
                  <span class="must"></span>
                  <span style="color: #333333;font-weight: bold;font-size: 13px">特价:</span>
                  <div
                    style="display: inline;"
                    v-for="(z,zIndex) in item.activityGoodsVOList"
                    :key="zIndex"
                  >
                    <span style="color: #333333">
                      <span style="color: #FB6E52">{{z.taxPrice}}元</span>
                      /{{z.unitName}}
                      <span
                        v-if="zIndex<item.activityGoodsVOList.length-1"
                      >,</span>
                    </span>
                    <!-- <span style="color: #333333" v-if="z.unitName == '包'">
                      <span style="color: #FB6E52">{{z.taxPrice}}元</span>/包
                      <span v-if="item.activityGoodsVOList.length>1">,</span>
                    </span>
                    <span style="color: #333333" v-if="z.unitName == '件'">
                      <span style="color: #FB6E52">{{z.taxPrice}}元</span>/件
                    </span>-->
                  </div>
                </div>
                <div>
                  <span class="must"></span>
                  <span style="color: #333333;font-weight: bold;font-size: 13px">优惠限购:</span>
                  <div
                    style="display: inline;"
                    v-for="(z,zIndex) in item.activityGoodsVOList"
                    :key="zIndex"
                  >
                    <span style="color: #FB6E52" v-if="z.limitNum!=null">
                      {{z.limitNum}}{{z.unitName}}
                      <span
                        style="color: #333333;"
                        v-if="zIndex<item.activityGoodsVOList.length-1"
                      >,</span>
                    </span>
                    <!-- <span style="color: #FB6E52" v-if="z.unitName == '包'&&z.limitNum!=null">
                      {{z.limitNum}}包
                      <span style="color: #333333;" v-if="item.activityGoodsVOList.length>1">,</span>
                    </span>
                    <span
                      style="color: #FB6E52"
                      v-if="z.unitName == '件'&&z.limitNum!=null"
                    >{{z.limitNum}}件</span>-->
                  </div>
                </div>
              </div>
              <span class="solSpan">开始时间：{{item.beginTime}}</span>
              <span class="solSpan">结束时间：{{item.endTime}}</span>
              <span class="solSpan">
                参与客户：
                <span
                  class="solSpan"
                  v-for="(j,jIndex) in item.distributorCategoryVOList"
                  :key="jIndex"
                >
                  {{j.distributorCategoryName}}
                  <span
                    v-if="jIndex!=(item.distributorCategoryVOList.length-1)"
                  >、</span>
                </span>
              </span>
            </div>
            <div
              class="specialOfferBtnGroup display-flex flex-direction-column align-items-center justify-content-flex-justify"
            >
              <p
                class="statusText"
                :style="{color:(item.state==1?'#F7BA45':(item.state==0?'#4BC1A1':'#BBBBBB'))}"
              >{{item.state==0?'未开始':(item.state==1?'进行中':(item.state==2?'已结束':'已停止'))}}</p>
              <div style="margin-bottom: 10px">
                <p
                  v-if="item.state==0||item.state==1"
                  class="closeBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
                  style="background-color: #8E919F"
                  @click="endActivity(item.activityGoodsIdList)"
                >
                  <span>立即结束</span>
                </p>
                <p
                  v-if="item.state==2||item.state==3"
                  class="closeBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
                >
                  <span>立即结束</span>
                </p>
                <p
                  v-if="item.state==0||item.state==1"
                  class="shareBtn hasShareBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
                  @click="showShareDialogFn(item)"
                >
                  <span>分享</span>
                  <img src="../../../../assets/img/order/shareGoods.png" alt />
                </p>
                <p
                  v-if="item.state==2||item.state==3"
                  class="shareBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
                >
                  <span>分享</span>
                  <img src="../../../../assets/img/order/shareBtnG.png" alt />
                </p>
              </div>
            </div>
          </li>
        </ul>
      </scroller>
      <div
        v-else
        class="display-flex flex-direction-row align-items-center justify-content-flex-center"
      >
        <img
          @click="initData(selectIndex)"
          style="width: 3rem;margin-top: 2rem"
          src="../../../../assets/img/customer/data_empty.png"
          alt
        />
      </div>
    </div>
    <div
      v-show="showMask"
      @click="showMask=false"
      class="mask"
      style="display: block;opacity: 0.5;"
    ></div>
    <x-dialog v-model="showShareDialog" class="shareDialog" hide-on-blur>
      <div class="display-flex flex-direction-row align-items-center justify-content-flex-center">
        <img class="shareImgStyle" :src="this.shareImg" />
        <div
          style="margin-right: .35rem"
          class="display-flex flex-direction-column align-items-center justify-content-flex-center"
        >
          <p style="color: #222222;font-size: 16px;font-weight: bold;">{{shareTitle}}</p>
          <div
            class="shareDialogBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
            @click="shareGoods()"
          >
            <span>分享</span>
          </div>
        </div>
      </div>
    </x-dialog>
  </div>
</template>

<script>
export default {
  name: "specialOfferList",
  data() {
    return {
      showShareDialog: false,
      showMask: false,
      selectIndex: 99,
      status: 2,
      dataArr: [],
      shareImg: "",
      shareTitle: "",
      shareLink: "",
    };
  },
  methods: {
    showDialog() {
      this.showMask = !this.showMask;
    },
    showShareDialogFn(item) {
      // this.showShareDialog = true;
      this.shareImg = item.buyGoods.defaultPhoto;
      this.shareTitle =
        "【" +
        item.buyGoods.brandName +
        "】" +
        item.buyGoods.name +
        item.buyGoods.spec +
        ",特价抢购中!";
      this.shareLink = this.$webUrl + "good/operate?goodId=" + item.buyGoods.id;
      this.$callJava({
        code: 1015, // 分享特价商品
        goodsImg: this.shareImg,
        goodsLink: this.shareLink,
        goodsTitle: this.shareTitle,
      });
    },
    shareGoods() {
      this.showShareDialog = false;
      // this.$callJava({code:1009,shopName:this.shareTitle,shareLink:this.shareLink,shopLogo:this.shareImg})
      this.$callJava({
        code: 1015, // 分享特价商品
        goodsImg: this.shareImg,
        goodsLink: this.shareLink,
        goodsTitle: this.shareTitle,
      });
    },
    closeDialog(i) {
      // console.log(i)
      this.showMask = false;
      this.selectIndex = i;
      this.initData(i);
    },
    goSOSettingPage() {
      if (this.$fromApp(this)) {
        this.$callJava({
          url:
            this.$webUrl + "MarketingActivities/SpecialOfferSetting?from=app",
        });
      } else {
        this.$router.push("/MarketingActivities/SpecialOfferSetting");
      }
    },
    initData(id = "") {
      if (id == 99) {
        id = "";
      }
      this.$ajax.get(
        "activity/discount/list",
        (res) => {
          if (res.code == "200") {
            this.dataArr = res.data;
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        { state: id }
      );
    },
    endActivity(val) {
      let arr = [];
      for (let i = 0; i < val.length; i++) {
        arr.push(val[i]);
      }
      // console.log(arr)
      this.$ajax.post("activity/end", { ids: arr.join(",") }, (res) => {
        // console.log(res);
        if (res.code == "200") {
          if (this.selectIndex != 99) {
            this.initData(this.selectIndex);
          } else {
            this.initData();
          }
        } else {
          this.$vux.toast.text(res.msg, "center");
        }
      });
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style lang="less" type="text/less" scoped>
ul > li {
  list-style: none;
}
input {
  -webkit-appearance: none;
}
.showMaskStyle {
  z-index: 100000;
}
.SOLBody {
  .SOLTop {
    width: 100%;
  }
  .headRight {
    font-size: 16px;
    color: #ffffff;
  }
  .allStatus {
    height: 0.88rem;
    font-size: 16px;
    color: #333333;
    width: 100%;
    background-color: #ffffff;
    font-weight: bold;
    img {
      width: 8px;
      height: 8px;
      margin-bottom: 2px;
    }
  }
  .statusList {
    background-color: #ffffff;
  }
  .statusItem {
    width: 100%;
    height: 0.86rem;
    line-height: 0.86rem;
    border-top: 1px solid #ebebeb;
    span {
      margin-left: 0.3rem;
      font-size: 16px;
      color: #222222;
    }
    img {
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.3rem;
    }
    .selectText {
      color: #527dd9;
    }
  }
  .specialOfferList {
    margin-top: 0.2rem;
    .specialOfferItem {
      width: 6.9rem;
      border-radius: 16px;
      background-color: #ffffff;
      margin-bottom: 0.2rem;
      .specialOfferContent {
        width: 5rem;
        padding-left: 10px;
        margin-top: 8px;
        p {
          span {
            color: #333333;
          }
          font-size: 15px;
          height: 0.7rem;
          font-weight: bold;
          color: #222222;
        }
        .solSpan {
          font-size: 12px;
          margin: 1px 0;
          color: #999999;
        }
        .soTip {
          width: 4.4rem;
          text-indent: 15px;
          padding: 0.08rem 0;
          border-radius: 0.3rem;
          background-color: #fdf8f4;
          border: 1px solid #ffead9;
          .must {
            display: inline-block;
            width: 0.05rem;
            height: 0.15rem;
            margin-bottom: 0.02rem;
            margin-right: 0.01rem;
            border-radius: 0.025rem;
            background-color: #fc6e51;
          }
        }
      }
      .specialOfferBtnGroup {
        width: 1.9rem;
        .statusText {
          margin-top: 15px;
          font-size: 15px;
          font-weight: 500;
        }
        .shareBtn {
          width: 1.38rem;
          height: 0.52rem;
          color: #ffffff;
          background-color: #eeeeee;
          line-height: 0.52rem;
          text-align: center;
          border-radius: 6px;
          margin-top: 8px;
          font-size: 12px;
          img {
            width: 0.2rem;
            height: 0.2rem;
            margin-left: 0.1rem;
          }
        }
        .hasShareBtn {
          background-color: #ffffff;
          color: #333333;
          border: 1px solid #dddddd;
        }
        .closeBtn {
          width: 1.38rem;
          height: 0.52rem;
          color: #ffffff;
          background-color: #eeeeee;
          line-height: 0.52rem;
          text-align: center;
          border-radius: 6px;
          font-size: 12px;
        }
      }
    }
  }
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    background-color: #000;
    z-index: 999;
  }
  .shareDialog {
    .shareImgStyle {
      width: 1.84rem;
      height: 1.84rem;
      margin: 0.6rem 0.35rem;
    }
    .shareDialogBtn {
      width: 2.42rem;
      height: 0.66rem;
      border-radius: 0.33rem;
      color: #ffffff;
      background-color: #527dd9;
      margin-top: 0.1rem;
    }
  }
}
</style>
